<template>
  <div class="course-management">
    <div class="page-header">
      <h1>⚙️ 智慧课程管理</h1>
      <div class="header-actions">
        <button @click="showCreateDialog = true" class="btn-primary">
          ➕ 创建新课程
        </button>
      </div>
    </div>

    <!-- 课程统计 -->
    <div class="course-stats-section">
      <div class="stats-card">
        <div class="stat-item">
          <div class="stat-icon">📊</div>
          <div class="stat-info">
            <div class="stat-number">{{ courses.length }}</div>
            <div class="stat-label">总课程数</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon">🚀</div>
          <div class="stat-info">
            <div class="stat-number">{{ publishedCount }}</div>
            <div class="stat-label">已发布</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon">📝</div>
          <div class="stat-info">
            <div class="stat-number">{{ draftCount }}</div>
            <div class="stat-label">草稿</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon">📦</div>
          <div class="stat-info">
            <div class="stat-number">{{ archivedCount }}</div>
            <div class="stat-label">已归档</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 课程列表 -->
    <div class="course-list-section">
      <div class="section-header">
        <h2>📚 课程列表</h2>
        <div class="header-controls">
          <div class="status-filter">
            <select v-model="statusFilter" class="status-select">
              <option value="">全部状态</option>
              <option value="draft">📝 草稿</option>
              <option value="published">🚀 已发布</option>
              <option value="archived">📦 已归档</option>
            </select>
          </div>
          <div class="search-bar">
            <input 
              v-model="searchQuery" 
              placeholder="搜索课程..." 
              class="search-input"
            >
          </div>
        </div>
      </div>

      <div class="course-grid">
        <div 
          v-for="course in filteredCourses" 
          :key="course.id"
          class="course-card"
        >
          <div class="course-thumbnail">
            <img :src="course.thumbnail" :alt="course.title">
            <div class="course-status" :class="course.status">
              {{ getStatusText(course.status) }}
            </div>
          </div>
          
          <div class="course-info">
            <h3>{{ course.title }}</h3>
            <p class="course-description">{{ course.description }}</p>
            
            <div class="course-meta">
              <span class="meta-item">
                <span class="meta-icon">⏱️</span>
                {{ course.duration }}分钟
              </span>
              <span class="meta-item">
                <span class="meta-icon">🎬</span>
                {{ (course.scenes && course.scenes.length) || 0 }}个场景
              </span>
              <span class="meta-item">
                <span class="meta-icon">📝</span>
                {{ getTotalSlides(course) }}页讲稿
              </span>
            </div>
            
            <div class="course-actions">
              <button @click="editCourse(course)" class="btn-edit">
                ✏️ 编辑
              </button>
              <button @click="viewCourseDetail(course)" class="btn-view">
                👁️ 查看详情
              </button>
              <button 
                v-if="course.status === 'draft'" 
                @click="publishCourse(course.id)" 
                class="btn-publish"
              >
                🚀 发布
              </button>
              <button 
                v-if="course.status === 'published'" 
                @click="unpublishCourse(course.id)" 
                class="btn-unpublish"
              >
                📤 取消发布
              </button>
              <button 
                v-if="course.status !== 'archived'" 
                @click="archiveCourse(course.id)" 
                class="btn-archive"
              >
                📦 归档
              </button>
              <button @click="deleteCourse(course.id)" class="btn-delete">
                🗑️ 删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建/编辑课程弹窗 -->
    <div v-if="showCreateDialog || showEditDialog" class="dialog-overlay" @click="closeDialogs">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>{{ showCreateDialog ? '➕ 创建新课程' : '✏️ 编辑课程' }}</h3>
          <button @click="closeDialogs" class="close-btn">✕</button>
        </div>
        
        <div class="dialog-body">
          <div class="form-group">
            <label>课程标题</label>
            <input v-model="currentCourse.title" placeholder="请输入课程标题" class="form-input">
          </div>
          
          <div class="form-group">
            <label>课程描述</label>
            <textarea v-model="currentCourse.description" placeholder="请输入课程描述" class="form-textarea"></textarea>
          </div>
          
          <div class="form-group">
            <label>课程缩略图</label>
            <input v-model="currentCourse.thumbnail" placeholder="请输入图片URL" class="form-input">
          </div>
          
          <div class="form-group">
            <label>PPT文件</label>
            <div class="file-upload">
              <input 
                type="file" 
                @change="handleFileUpload" 
                accept=".pptx,.ppt" 
                class="file-input"
                :disabled="isParsingPPT"
              >
              <button @click="loadTestPPT" class="btn-secondary" :disabled="isParsingPPT">
                📄 加载测试PPT
              </button>
            </div>
            
            <!-- PPT解析进度 -->
            <div v-if="isParsingPPT" class="ppt-parsing-progress">
              <div class="progress-info">
                <span class="progress-icon">🔄</span>
                <span class="progress-text">正在解析PPT文件...</span>
                <span class="progress-percent">{{ parseProgress }}%</span>
              </div>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: parseProgress + '%' }"></div>
              </div>
            </div>
          </div>
          
          <!-- PPT页面与讲稿编辑 -->
          <div class="ppt-slides-section">
            <div class="section-title">
              <h4>📄 PPT页面与讲稿编辑</h4>
              <div class="section-actions">
                <button @click="addPPTSlide" class="btn-add-slide">➕ 添加PPT页面</button>
                <button @click="showBatchEditDialog = true" class="btn-batch-edit">📝 批量编辑</button>
                <button @click="reorderSlides" class="btn-reorder">🔄 重新排序</button>
              </div>
            </div>
            
            <!-- PPT页面列表 -->
            <div class="ppt-slides-list">
              <div 
                v-for="(slide, slideIndex) in (currentCourse.pptSlides || [])" 
                :key="slideIndex" 
                class="ppt-slide-item"
                :class="{ 'selected': selectedSlideIndex === slideIndex }"
                @click="selectSlide(slideIndex)"
              >
                <div class="slide-order">
                  <div class="order-number">{{ slideIndex + 1 }}</div>
                  <div class="order-controls">
                    <button 
                      @click.stop="moveSlideUp(slideIndex)" 
                      :disabled="slideIndex === 0"
                      class="btn-move"
                    >↑</button>
                    <button 
                      @click.stop="moveSlideDown(slideIndex)" 
                      :disabled="slideIndex === (currentCourse.pptSlides ? currentCourse.pptSlides.length - 1 : 0)"
                      class="btn-move"
                    >↓</button>
                  </div>
                </div>
                
                <div class="slide-content-area">
                  <!-- 页面基本信息 -->
                  <div class="slide-basic-info">
                    <div class="slide-title-section">
                      <div class="form-group">
                        <label>环节类型</label>
                        <select v-model="slide.slideType" @change="onSlideTypeChange(slideIndex)" class="form-select">
                          <option value="title">📝 ppt内容</option>
                          <option value="ppt">📄 PPT页面</option>
                          <option value="image">🖼️ 图片展示</option>
                          <option value="video">🎬 视频播放</option>
                          <option value="model">🎯 3D模型</option>
                          <option value="video-image">🎬+🖼️ 视频+图片</option>
                        </select>
                      </div>
                      <div class="form-group">
                        <label>环节标题</label>
                        <input v-model="slide.title" placeholder="请输入环节标题" class="form-input">
                      </div>
                      <div class="form-group">
                        <label>显示时长(秒)</label>
                        <input 
                          v-model.number="slide.displayDuration" 
                          type="number" 
                          min="1" 
                          max="300"
                          class="form-input duration-input"
                        >
                      </div>
                    </div>
                  </div>
                  
                  <!-- 素材预览和讲稿内容 -->
                  <div class="slide-main-content">
                    <!-- 素材预览区域 -->
                    <div class="material-preview">
                      <!-- 标题页类型 -->
                      <div v-if="slide.slideType === 'title'" class="title-preview">
                        <div class="title-display" :style="getTitleStyle(slide)">
                          <h2>{{ slide.title || '标题内容' }}</h2>
                          <p v-if="slide.script">{{ slide.script }}</p>
                        </div>
                        <div class="title-controls">
                          <div class="color-controls">
                            <label>背景色</label>
                            <input type="color" v-model="slide.backgroundColor" class="color-input">
                          </div>
                          <div class="color-controls">
                            <label>文字色</label>
                            <input type="color" v-model="slide.textColor" class="color-input">
                          </div>
                        </div>
                      </div>
                      
                      <!-- PPT页面类型 -->
                      <div v-else-if="slide.slideType === 'ppt'" class="ppt-preview">
                        <div class="ppt-thumbnail">
                          <img v-if="slide.pptImage" :src="slide.pptImage" :alt="`PPT第${slideIndex + 1}页`">
                          <div v-else class="material-placeholder">
                            <span>📄</span>
                            <p>PPT页面</p>
                          </div>
                        </div>
                        <div class="material-upload">
                          <input 
                            type="file" 
                            @change="uploadMaterial(slideIndex, 'pptImage', $event)" 
                            accept="image/*"
                            class="file-input-hidden"
                            :id="`ppt-upload-${slideIndex}`"
                          >
                          <label :for="`ppt-upload-${slideIndex}`" class="btn-upload">
                            📷 上传PPT图片
                          </label>
                        </div>
                      </div>
                      
                      <!-- 图片展示类型 -->
                      <div v-else-if="slide.slideType === 'image'" class="image-preview">
                        <div class="image-thumbnail">
                          <img v-if="slide.imageUrl" :src="slide.imageUrl" :alt="`图片第${slideIndex + 1}页`">
                          <div v-else class="material-placeholder">
                            <span>🖼️</span>
                            <p>图片素材</p>
                          </div>
                        </div>
                        <div class="material-upload">
                          <input 
                            type="file" 
                            @change="uploadMaterial(slideIndex, 'imageUrl', $event)" 
                            accept="image/*"
                            class="file-input-hidden"
                            :id="`image-upload-${slideIndex}`"
                          >
                          <label :for="`image-upload-${slideIndex}`" class="btn-upload">
                            🖼️ 上传图片
                          </label>
                        </div>
                        <div class="image-controls">
                          <label>图片位置</label>
                          <select v-model="slide.imagePosition" class="form-select">
                            <option value="center">居中</option>
                            <option value="left">左对齐</option>
                            <option value="right">右对齐</option>
                            <option value="top">顶部</option>
                            <option value="bottom">底部</option>
                          </select>
                        </div>
                      </div>
                      
                      <!-- 视频播放类型 -->
                      <div v-else-if="slide.slideType === 'video'" class="video-preview">
                        <div class="video-thumbnail">
                          <video v-if="slide.videoUrl" :src="slide.videoUrl" controls class="video-element">
                            您的浏览器不支持视频播放
                          </video>
                          <div v-else class="material-placeholder">
                            <span>🎬</span>
                            <p>视频素材</p>
                          </div>
                        </div>
                        <div class="material-upload">
                          <input 
                            type="file" 
                            @change="uploadMaterial(slideIndex, 'videoUrl', $event)" 
                            accept="video/*"
                            class="file-input-hidden"
                            :id="`video-upload-${slideIndex}`"
                          >
                          <label :for="`video-upload-${slideIndex}`" class="btn-upload">
                            🎬 上传视频
                          </label>
                        </div>
                        <div class="video-controls">
                          <div class="control-group">
                            <label>
                              <input type="checkbox" v-model="slide.videoAutoplay">
                              自动播放
                            </label>
                          </div>
                          <div class="control-group">
                            <label>
                              <input type="checkbox" v-model="slide.videoLoop">
                              循环播放
                            </label>
                          </div>
                          <div class="control-group">
                            <label>音量: {{ slide.videoVolume }}%</label>
                            <input type="range" v-model="slide.videoVolume" min="0" max="100" class="volume-slider">
                          </div>
                        </div>
                      </div>
                      
                      <!-- 3D模型类型 -->
                      <div v-else-if="slide.slideType === 'model'" class="model-preview">
                        <div class="model-thumbnail">
                          <div v-if="slide.modelUrl" class="model-viewer">
                            <span>🎯</span>
                            <p>3D模型已加载</p>
                            <small>{{ slide.modelUrl.split('/').pop() }}</small>
                          </div>
                          <div v-else class="material-placeholder">
                            <span>🎯</span>
                            <p>3D模型</p>
                          </div>
                        </div>
                        <div class="material-upload">
                          <input 
                            type="file" 
                            @change="uploadMaterial(slideIndex, 'modelUrl', $event)" 
                            accept=".glb,.gltf,.obj,.fbx"
                            class="file-input-hidden"
                            :id="`model-upload-${slideIndex}`"
                          >
                          <label :for="`model-upload-${slideIndex}`" class="btn-upload">
                            🎯 上传3D模型
                          </label>
                        </div>
                        <div class="model-controls">
                          <div class="control-group">
                            <label>缩放: {{ slide.modelScale }}x</label>
                            <input type="range" v-model="slide.modelScale" min="0.1" max="3" step="0.1" class="scale-slider">
                          </div>
                          <div class="control-group">
                            <label>动画</label>
                            <select v-model="slide.modelAnimation" class="form-select">
                              <option value="">无动画</option>
                              <option value="rotate">旋转</option>
                              <option value="float">悬浮</option>
                              <option value="pulse">脉冲</option>
                            </select>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 视频+图片类型 -->
                      <div v-else-if="slide.slideType === 'video-image'" class="video-image-preview">
                        <div class="dual-material">
                          <div class="primary-material">
                            <video v-if="slide.videoUrl" :src="slide.videoUrl" controls class="video-element">
                              您的浏览器不支持视频播放
                            </video>
                            <div v-else class="material-placeholder">
                              <span>🎬</span>
                              <p>主视频</p>
                            </div>
                          </div>
                          <div class="secondary-material">
                            <img v-if="slide.secondaryImageUrl" :src="slide.secondaryImageUrl" alt="辅助图片">
                            <div v-else class="material-placeholder">
                              <span>🖼️</span>
                              <p>辅助图片</p>
                            </div>
                          </div>
                        </div>
                        <div class="dual-upload">
                          <div class="upload-group">
                            <input 
                              type="file" 
                              @change="uploadMaterial(slideIndex, 'videoUrl', $event)" 
                              accept="video/*"
                              class="file-input-hidden"
                              :id="`dual-video-upload-${slideIndex}`"
                            >
                            <label :for="`dual-video-upload-${slideIndex}`" class="btn-upload">
                              🎬 上传视频
                            </label>
                          </div>
                          <div class="upload-group">
                            <input 
                              type="file" 
                              @change="uploadMaterial(slideIndex, 'secondaryImageUrl', $event)" 
                              accept="image/*"
                              class="file-input-hidden"
                              :id="`dual-image-upload-${slideIndex}`"
                            >
                            <label :for="`dual-image-upload-${slideIndex}`" class="btn-upload">
                              🖼️ 上传图片
                            </label>
                          </div>
                        </div>
                        <div class="layout-controls">
                          <div class="control-group">
                            <label>布局方式</label>
                            <select v-model="slide.layoutType" class="form-select">
                              <option value="split">左右分屏</option>
                              <option value="overlay">图片叠加</option>
                              <option value="picture-in-picture">画中画</option>
                            </select>
                          </div>
                          <div class="control-group">
                            <label>主素材占比: {{ slide.primarySize }}%</label>
                            <input type="range" v-model="slide.primarySize" min="30" max="90" class="size-slider">
                          </div>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 讲稿内容 -->
                    <div class="script-content">
                      <div class="script-header">
                        <h6>📝 讲稿内容</h6>
                        <div class="script-meta">
                          <span class="duration">{{ calculateSlideDuration(slide.script) }}秒</span>
                          <span class="word-count">{{ slide.script ? slide.script.length : 0 }}字</span>
                        </div>
                      </div>
                      <textarea 
                        v-model="slide.script" 
                        placeholder="请输入该页面对应的讲稿内容..."
                        class="script-textarea"
                        @input="updateCourseDuration"
                        rows="6"
                      ></textarea>
                    </div>
                  </div>
                </div>
                
                <!-- 画面属性设置 -->
                <div class="slide-properties">
                  <div class="properties-header">
                    <h6>⚙️ 画面属性</h6>
                    <button @click="togglePropertiesPanel(slideIndex)" class="btn-toggle">
                      {{ slide.showProperties ? '收起' : '展开' }}
                    </button>
                  </div>
                  
                  <div v-if="slide.showProperties" class="properties-panel">
                    <!-- 基础属性 -->
                    <div class="property-group">
                      <h7>📋 基础属性</h7>
                      <div class="property-row">
                        <div class="property-item">
                          <label>过渡效果</label>
                          <select v-model="slide.transition" class="property-select">
                            <option value="fade">淡入淡出</option>
                            <option value="slide">滑动</option>
                            <option value="zoom">缩放</option>
                            <option value="flip">翻转</option>
                            <option value="none">无过渡</option>
                          </select>
                        </div>
                        <div class="property-item">
                          <label>背景音乐</label>
                          <select v-model="slide.backgroundMusic" class="property-select">
                            <option value="">无背景音乐</option>
                            <option value="soft">轻柔音乐</option>
                            <option value="tech">科技音效</option>
                            <option value="nature">自然音效</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 镜头属性 -->
                    <div class="property-group">
                      <h7>🎥 镜头属性</h7>
                      <div class="property-row">
                        <div class="property-item">
                          <label>景别设置</label>
                          <select v-model="slide.cameraShot" class="property-select">
                            <option value="extreme-close">特写</option>
                            <option value="close">近景</option>
                            <option value="medium-close">中近景</option>
                            <option value="medium">中景</option>
                            <option value="medium-wide">中远景</option>
                            <option value="wide">远景</option>
                            <option value="extreme-wide">全景</option>
                            <option value="ppt-focus">PPT特写</option>
                          </select>
                        </div>
                        <div class="property-item">
                          <label>镜头角度</label>
                          <select v-model="slide.cameraAngle" class="property-select">
                            <option value="eye-level">平视</option>
                            <option value="high">俯视</option>
                            <option value="low">仰视</option>
                            <option value="bird-eye">鸟瞰</option>
                            <option value="worm-eye">虫视</option>
                          </select>
                        </div>
                      </div>
                      
                      <div class="property-row">
                        <div class="property-item">
                          <label>镜头运动</label>
                          <select v-model="slide.cameraMovement" class="property-select">
                            <option value="static">静止</option>
                            <option value="pan-left">左摇</option>
                            <option value="pan-right">右摇</option>
                            <option value="tilt-up">上摇</option>
                            <option value="tilt-down">下摇</option>
                            <option value="zoom-in">推进</option>
                            <option value="zoom-out">拉远</option>
                            <option value="dolly">移动</option>
                          </select>
                        </div>
                        <div class="property-item">
                          <label>运动速度</label>
                          <select v-model="slide.movementSpeed" class="property-select">
                            <option value="slow">慢速</option>
                            <option value="normal">正常</option>
                            <option value="fast">快速</option>
                          </select>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 交互属性 -->
                    <div class="property-group">
                      <h7>🎯 交互属性</h7>
                      <div class="property-row">
                        <div class="property-item">
                          <label>是否可暂停</label>
                          <input type="checkbox" v-model="slide.pausable" class="property-checkbox">
                        </div>
                        <div class="property-item">
                          <label>是否可跳过</label>
                          <input type="checkbox" v-model="slide.skippable" class="property-checkbox">
                        </div>
                      </div>
                      
                      <div class="property-row">
                        <div class="property-item">
                          <label>互动提示</label>
                          <input v-model="slide.interactionHint" placeholder="如：点击继续、语音回答等" class="property-input">
                        </div>
                        <div class="property-item">
                          <label>关键词标记</label>
                          <input v-model="slide.keywords" placeholder="用逗号分隔关键词" class="property-input">
                        </div>
                      </div>
                    </div>
                    
                    <!-- 字幕设置 -->
                    <div class="property-group" v-if="slide.slideType === 'video' || slide.slideType === 'video-image'">
                      <h7>📝 字幕设置</h7>
                      <div class="property-row">
                        <div class="property-item">
                          <label>字幕位置</label>
                          <select v-model="slide.subtitleStyle" class="property-select">
                            <option value="bottom">底部</option>
                            <option value="top">顶部</option>
                            <option value="center">居中</option>
                            <option value="none">无字幕</option>
                          </select>
                        </div>
                        <div class="property-item">
                          <label>字体大小</label>
                          <input v-model.number="slide.fontSize" type="number" min="12" max="32" class="property-input">
                        </div>
                      </div>
                      
                      <div class="property-row full-width">
                        <div class="property-item">
                          <label>字幕内容</label>
                          <textarea 
                            v-model="slide.subtitles" 
                            placeholder="输入字幕内容，支持时间轴格式..."
                            class="property-textarea"
                            rows="3"
                          ></textarea>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 文字样式 -->
                    <div class="property-group" v-if="slide.slideType === 'title'">
                      <h7>✏️ 文字样式</h7>
                      <div class="property-row">
                        <div class="property-item">
                          <label>字体大小</label>
                          <input v-model.number="slide.fontSize" type="number" min="12" max="48" class="property-input">
                        </div>
                        <div class="property-item">
                          <label>字体粗细</label>
                          <select v-model="slide.fontWeight" class="property-select">
                            <option value="normal">正常</option>
                            <option value="bold">粗体</option>
                            <option value="lighter">细体</option>
                          </select>
                        </div>
                      </div>
                      
                      <div class="property-row">
                        <div class="property-item">
                          <label>文字对齐</label>
                          <select v-model="slide.textAlign" class="property-select">
                            <option value="left">左对齐</option>
                            <option value="center">居中</option>
                            <option value="right">右对齐</option>
                          </select>
                        </div>
                        <div class="property-item">
                          <label>文字颜色</label>
                          <input type="color" v-model="slide.textColor" class="property-input">
                        </div>
                      </div>
                    </div>
                    
                    <!-- 高级属性 -->
                    <div class="property-group">
                      <h7>🔧 高级属性</h7>
                      <div class="property-row">
                        <div class="property-item">
                          <label>3D效果</label>
                          <select v-model="slide.effect3D" class="property-select">
                            <option value="">无3D效果</option>
                            <option value="hologram">全息投影</option>
                            <option value="particle">粒子效果</option>
                            <option value="glow">发光效果</option>
                            <option value="float">悬浮效果</option>
                          </select>
                        </div>
                        <div class="property-item">
                          <label>AI语音</label>
                          <select v-model="slide.voiceType" class="property-select">
                            <option value="female-soft">女声-温柔</option>
                            <option value="female-professional">女声-专业</option>
                            <option value="male-deep">男声-深沉</option>
                            <option value="male-friendly">男声-亲和</option>
                            <option value="robot">机器人声</option>
                          </select>
                        </div>
                      </div>
                      
                      <div class="property-row">
                        <div class="property-item">
                          <label>可点击交互</label>
                          <input type="checkbox" v-model="slide.clickable" class="property-checkbox">
                        </div>
                        <div class="property-item">
                          <label>悬浮效果</label>
                          <input type="checkbox" v-model="slide.hoverEffect" class="property-checkbox">
                        </div>
                      </div>
                      
                      <div class="property-row full-width">
                        <div class="property-item">
                          <label>备注说明</label>
                          <textarea 
                            v-model="slide.notes" 
                            placeholder="添加制作备注、特殊要求等..."
                            class="property-textarea"
                            rows="2"
                          ></textarea>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="slide-actions">
                  <button @click="duplicateSlide(slideIndex)" class="btn-action btn-duplicate">
                    📋 复制
                  </button>
                  <button @click="previewSlide(slideIndex)" class="btn-action btn-preview">
                    👁️ 预览
                  </button>
                  <button @click="removeSlide(slideIndex)" class="btn-action btn-remove">
                    🗑️ 删除
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="course-summary">
            <div class="summary-item">
              <span class="summary-label">预计总时长:</span>
              <span class="summary-value">{{ currentCourse.duration }}分钟</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">总场景数:</span>
                              <span class="summary-value">{{ (currentCourse.scenes && currentCourse.scenes.length) || 0 }}个</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">总讲稿数:</span>
              <span class="summary-value">{{ getTotalSlides(currentCourse) }}页</span>
            </div>
          </div>
        </div>
        
        <div class="dialog-footer">
          <button @click="closeDialogs" class="btn-cancel">取消</button>
          <button @click="saveCourse" class="btn-save">💾 保存课程</button>
        </div>
      </div>
    </div>

    <!-- 课程详情弹窗 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="showDetailDialog = false">
      <div class="dialog-content detail-dialog" @click.stop>
        <div class="dialog-header">
          <h3>👁️ 课程详情 - {{ selectedCourse.title }}</h3>
          <div class="header-actions">
            <button @click="exportCourseData" class="btn-export">📤 导出数据</button>
            <button @click="previewCourse" class="btn-preview">🎯 3D预览</button>
            <button @click="showDetailDialog = false" class="close-btn">✕</button>
          </div>
        </div>
        
        <div class="dialog-body">
          <!-- 课程基本信息 -->
          <div class="course-basic-info">
            <div class="info-section">
              <div class="course-thumbnail-large">
                <img :src="selectedCourse.thumbnail" :alt="selectedCourse.title" class="course-image">
                <div class="status-badge" :class="selectedCourse.status">
                  {{ getStatusText(selectedCourse.status) }}
                </div>
              </div>
              <div class="course-meta-info">
                <h4>📋 基本信息</h4>
                <div class="info-item">
                  <label>课程标题:</label>
                  <span>{{ selectedCourse.title }}</span>
                </div>
                <div class="info-item">
                  <label>课程描述:</label>
                  <span>{{ selectedCourse.description || '暂无描述' }}</span>
                </div>
                <div class="info-item">
                  <label>创建时间:</label>
                  <span>{{ formatDate(selectedCourse.createdAt) }}</span>
                </div>
                <div class="info-item">
                  <label>最后更新:</label>
                  <span>{{ formatDate(selectedCourse.updatedAt) }}</span>
                </div>
                <div class="info-item" v-if="selectedCourse.teacher">
                  <label>授课教师:</label>
                  <span>{{ selectedCourse.teacher.name }} ({{ selectedCourse.teacher.subject }})</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 课程统计数据 -->
          <div class="course-stats-detail">
            <h4>📊 课程统计</h4>
            <div class="stats-grid">
              <div class="stat-card">
                <div class="stat-icon">⏱️</div>
                <div class="stat-content">
                  <div class="stat-title">总时长</div>
                  <div class="stat-value">{{ selectedCourse.duration }}分钟</div>
                  <div class="stat-detail">约{{ Math.ceil(selectedCourse.duration / 60) }}小时</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">📄</div>
                <div class="stat-content">
                  <div class="stat-title">PPT页数</div>
                  <div class="stat-value">{{ (selectedCourse.pptSlides && selectedCourse.pptSlides.length) || 0 }}页</div>
                  <div class="stat-detail">平均{{ Math.round(selectedCourse.duration / ((selectedCourse.pptSlides && selectedCourse.pptSlides.length) || 1)) }}分钟/页</div>
                </div>
              </div>
              <div class="stat-card">
                <div class="stat-icon">📝</div>
                <div class="stat-content">
                  <div class="stat-title">讲稿字数</div>
                  <div class="stat-value">{{ calculateTotalWords(selectedCourse) }}</div>
                  <div class="stat-detail">约{{ Math.ceil(calculateTotalWords(selectedCourse) / 200) }}分钟阅读</div>
                </div>
              </div>
              <div class="stat-card" v-if="selectedCourse.stats">
                <div class="stat-icon">👥</div>
                <div class="stat-content">
                  <div class="stat-title">学习人数</div>
                  <div class="stat-value">{{ selectedCourse.stats.studentsEnrolled || 0 }}</div>
                  <div class="stat-detail">完成率{{ selectedCourse.stats.completionRate || 0 }}%</div>
                </div>
              </div>
            </div>
          </div>

          <!-- PPT讲稿详情 -->
          <div class="ppt-slides-detail">
            <div class="detail-section-header">
              <h4>📖 PPT讲稿详情</h4>
              <div class="section-actions">
                <button @click="selectAllSlides" class="btn-select-all">全选</button>
                <button @click="exportSelectedSlides" class="btn-export-slides" :disabled="selectedSlides.length === 0">
                  导出选中({{ selectedSlides.length }})
                </button>
                <button @click="toggleSlidesView" class="btn-toggle-view">
                  {{ showSlidesDetailed ? '收起' : '展开' }}详情
                </button>
              </div>
            </div>
            
            <div v-if="selectedCourse.pptSlides && selectedCourse.pptSlides.length > 0" class="slides-list">
              <div 
                v-for="(slide, slideIndex) in selectedCourse.pptSlides" 
                :key="slideIndex" 
                class="slide-detail-card"
                :class="{ 'selected': selectedSlides.includes(slideIndex), 'expanded': showSlidesDetailed }"
              >
                <div class="slide-header">
                  <div class="slide-selector">
                    <input 
                      type="checkbox" 
                      :checked="selectedSlides.includes(slideIndex)"
                      @change="toggleSlideSelection(slideIndex)"
                      class="slide-checkbox"
                    >
                    <span class="slide-number">第 {{ slideIndex + 1 }} 页</span>
                  </div>
                  <div class="slide-title">{{ slide.title || `幻灯片 ${slideIndex + 1}` }}</div>
                  <div class="slide-meta">
                    <span class="slide-type" :class="slide.slideType">{{ getSlideTypeText(slide.slideType) }}</span>
                    <span class="slide-duration">{{ slide.displayDuration }}秒</span>
                  </div>
                  <div class="slide-actions">
                    <button @click="editPPTSlide(slideIndex)" class="btn-edit">✏️</button>
                    <button @click="previewSlide(slideIndex)" class="btn-preview">👁️</button>
                    <button @click="copySlide(slideIndex)" class="btn-copy">📋</button>
                  </div>
                </div>
                
                <div v-if="showSlidesDetailed" class="slide-content">
                  <!-- 讲稿内容 -->
                  <div class="script-preview">
                    <h6>📝 讲稿内容</h6>
                    <div class="script-text">{{ slide.script || '暂无讲稿内容' }}</div>
                    <div class="script-stats">
                      <span>字数: {{ (slide.script || '').length }}</span>
                      <span>预计时长: {{ calculateSlideDuration(slide.script || '') }}秒</span>
                      <span v-if="slide.keywords">关键词: {{ slide.keywords }}</span>
                    </div>
                  </div>
                  
                  <!-- 视觉效果设置 -->
                  <div class="visual-settings">
                    <h6>🎨 视觉效果</h6>
                    <div class="visual-info">
                      <div class="color-info">
                        <span>背景色:</span>
                        <div class="color-preview" :style="{ backgroundColor: slide.backgroundColor || '#ffffff' }"></div>
                        <span>{{ slide.backgroundColor || '#ffffff' }}</span>
                      </div>
                      <div class="color-info">
                        <span>文字色:</span>
                        <div class="color-preview" :style="{ backgroundColor: slide.textColor || '#333333' }"></div>
                        <span>{{ slide.textColor || '#333333' }}</span>
                      </div>
                      <div class="effect-info">
                        <span>过渡效果: {{ slide.transition || 'fade' }}</span>
                        <span>镜头角度: {{ slide.cameraShot || 'medium' }}</span>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 素材信息 -->
                  <div class="material-info" v-if="hasSlideMedia(slide)">
                    <h6>🎬 素材信息</h6>
                    <div class="media-list">
                      <div v-if="slide.pptImage" class="media-item">
                        <span class="media-icon">📄</span>
                        <span>PPT图片</span>
                      </div>
                      <div v-if="slide.imageUrl" class="media-item">
                        <span class="media-icon">🖼️</span>
                        <span>图片素材</span>
                      </div>
                      <div v-if="slide.videoUrl" class="media-item">
                        <span class="media-icon">🎬</span>
                        <span>视频素材</span>
                      </div>
                      <div v-if="slide.modelUrl" class="media-item">
                        <span class="media-icon">🎯</span>
                        <span>3D模型</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-else class="no-slides">
              <div class="no-slides-icon">📄</div>
              <p>暂无PPT讲稿内容</p>
              <button @click="editCourse(selectedCourse)" class="btn-add-slides">➕ 添加讲稿</button>
            </div>
          </div>

          <!-- 学习数据分析 -->
          <div v-if="selectedCourse.stats" class="learning-analytics">
            <h4>📈 学习数据分析</h4>
            <div class="analytics-grid">
              <div class="analytics-card">
                <h6>学习进度分布</h6>
                <div class="progress-chart">
                  <div class="progress-item">
                    <span>已完成</span>
                    <div class="progress-bar-small">
                      <div class="progress-fill" :style="{ width: selectedCourse.stats.completionRate + '%' }"></div>
                    </div>
                    <span>{{ selectedCourse.stats.completionRate }}%</span>
                  </div>
                  <div class="progress-item">
                    <span>学习中</span>
                    <div class="progress-bar-small">
                      <div class="progress-fill studying" :style="{ width: Math.min(100 - selectedCourse.stats.completionRate, 30) + '%' }"></div>
                    </div>
                    <span>{{ Math.min(100 - selectedCourse.stats.completionRate, 30) }}%</span>
                  </div>
                </div>
              </div>
              
              <div class="analytics-card">
                <h6>学习效果</h6>
                <div class="score-info">
                  <div class="score-item">
                    <span class="score-label">平均分数</span>
                    <span class="score-value">{{ selectedCourse.stats.averageScore || 0 }}</span>
                  </div>
                  <div class="score-item">
                    <span class="score-label">及格率</span>
                    <span class="score-value">{{ Math.round((selectedCourse.stats.averageScore || 0) / 60 * 100) }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="dialog-footer">
          <button @click="showDetailDialog = false" class="btn-cancel">关闭</button>
          <button @click="editCourse(selectedCourse)" class="btn-edit-course">✏️ 编辑课程</button>
          <button @click="duplicateCourse(selectedCourse)" class="btn-duplicate">📋 复制课程</button>
        </div>
      </div>
    </div>

    <!-- 单独编辑讲稿弹窗 -->
    <div v-if="showSlideEditDialog" class="dialog-overlay" @click="showSlideEditDialog = false">
      <div class="dialog-content slide-edit-dialog" @click.stop>
        <div class="dialog-header">
          <h3>✏️ 编辑讲稿</h3>
          <button @click="showSlideEditDialog = false" class="close-btn">✕</button>
        </div>
        
        <div class="dialog-body">
          <div class="slide-edit-info">
            <div class="edit-meta">
              <span>场景: {{ selectedCourse.scenes[editingSlide.sceneIndex]?.name }}</span>
              <span>第 {{ editingSlide.slideIndex + 1 }} 幕</span>
              <span>预计时长: {{ calculateSlideDuration(editingSlide.content) }}秒</span>
            </div>
          </div>
          
          <div class="form-group">
            <label>讲稿内容</label>
            <textarea 
              v-model="editingSlide.content" 
              placeholder="请输入讲稿内容..."
              class="slide-edit-textarea"
              rows="10"
            ></textarea>
          </div>
          
          <div class="slide-tips">
            <h5>💡 编写提示</h5>
            <ul>
              <li>建议每段讲稿控制在30-60秒内</li>
              <li>使用简洁明了的语言</li>
              <li>适当添加停顿和强调</li>
              <li>考虑学生的理解节奏</li>
            </ul>
          </div>
        </div>
        
        <div class="dialog-footer">
          <button @click="showSlideEditDialog = false" class="btn-cancel">取消</button>
          <button @click="saveSlideContent" class="btn-save">💾 保存讲稿</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import courseDataManager from '@/utils/courseDataManager'

export default {
  name: 'CourseManagement',
  data() {
    return {
      searchQuery: '',
      // 状态筛选
      statusFilter: '',
      // PPT解析状态
      isParsingPPT: false,
      parseProgress: 0,
      showCreateDialog: false,
      showEditDialog: false,
      showDetailDialog: false,
      showSlideEditDialog: false,
      showBatchEditDialog: false,
      selectedSlideIndex: -1,
      
      // 课程详情相关
      selectedSlides: [], // 选中的幻灯片索引
      showSlidesDetailed: false, // 是否显示详细信息
      
      // 课程列表 - 从数据管理器获取
      courses: courseDataManager.getAllCourses(),
      
      // 原有的测试数据保留作为备份
      _originalCourses: [
        {
          id: 1,
          title: '人工智能基础',
          description: '介绍人工智能的基本概念、发展历史和应用领域',
          thumbnail: './static/img/01-zhong.png',
          status: 'published',
          duration: 45,
          scenes: [
            {
              name: '课程介绍',
              viewType: 'medium',
              slides: [
                { content: '欢迎大家来到人工智能基础课程。今天我们将一起探索AI的奇妙世界。' },
                { content: '人工智能是计算机科学的一个重要分支，它致力于创造能够模拟人类智能的机器。' }
              ]
            }
          ],
          pptSlides: [
            {
              title: '课程介绍',
              script: '欢迎大家来到人工智能基础课程。今天我们将一起探索AI的奇妙世界，了解人工智能的基本概念和应用。',
              slideType: 'title',
              displayDuration: 30,
              pptImage: '',
              imageUrl: '',
              videoUrl: '',
              modelUrl: '',
              secondaryImageUrl: '',
              imagePosition: 'center',
              videoAutoplay: true,
              videoLoop: false,
              videoVolume: 80,
              modelScale: 1.0,
              modelRotation: { x: 0, y: 0, z: 0 },
              modelAnimation: '',
              layoutType: 'single',
              primarySize: 70,
              secondarySize: 30,
              transition: 'fade',
              backgroundMusic: '',
              backgroundColor: '#f8f9fa',
              textColor: '#2c3e50',
              fontSize: 24,
              fontWeight: 'bold',
              textAlign: 'center',
              cameraShot: 'medium',
              cameraAngle: 'eye-level',
              cameraMovement: 'static',
              movementSpeed: 'normal',
              pausable: true,
              skippable: false,
              interactionHint: '',
              keywords: '人工智能,AI,基础',
              clickable: false,
              hoverEffect: false,
              effect3D: '',
              voiceType: 'female-professional',
              subtitles: '',
              subtitleStyle: 'bottom',
              notes: '',
              showProperties: false
            },
            {
              title: 'AI发展历史',
              script: '人工智能的发展可以追溯到20世纪50年代，从图灵测试到深度学习，AI经历了多次技术革命。',
              slideType: 'ppt',
              displayDuration: 45,
              pptImage: '',
              imageUrl: '',
              videoUrl: '',
              modelUrl: '',
              secondaryImageUrl: '',
              imagePosition: 'center',
              videoAutoplay: true,
              videoLoop: false,
              videoVolume: 80,
              modelScale: 1.0,
              modelRotation: { x: 0, y: 0, z: 0 },
              modelAnimation: '',
              layoutType: 'single',
              primarySize: 70,
              secondarySize: 30,
              transition: 'slide',
              backgroundMusic: 'tech',
              backgroundColor: '#ffffff',
              textColor: '#333333',
              fontSize: 16,
              fontWeight: 'normal',
              textAlign: 'left',
              cameraShot: 'ppt-focus',
              cameraAngle: 'eye-level',
              cameraMovement: 'zoom-in',
              movementSpeed: 'slow',
              pausable: true,
              skippable: true,
              interactionHint: '点击继续',
              keywords: '发展历史,图灵测试,深度学习',
              clickable: false,
              hoverEffect: false,
              effect3D: 'hologram',
              voiceType: 'male-deep',
              subtitles: '',
              subtitleStyle: 'bottom',
              notes: '重点强调关键时间节点',
              showProperties: false
            }
          ]
        },
        {
          id: 2,
          title: '机器学习实战',
          description: '深入学习机器学习算法，掌握实际应用技能',
          thumbnail: './static/img/02-zhong.png',
          status: 'draft',
          duration: 60,
          scenes: [
            {
              name: '算法介绍',
              viewType: 'ppt',
              slides: [
                { content: '机器学习是人工智能的核心技术，让我们从基础算法开始学习。' },
                { content: '监督学习、无监督学习和强化学习是机器学习的三大主要分支。' }
              ]
            },
            {
              name: '实践操作',
              viewType: 'close',
              slides: [
                { content: '现在让我们通过实际代码来理解线性回归算法的工作原理。' }
              ]
            }
          ],
          pptSlides: [
            {
              title: '机器学习概述',
              script: '机器学习是人工智能的核心技术，让我们从基础算法开始学习。它能让计算机从数据中自动学习规律。',
              pptImage: '',
              displayDuration: 35,
              transition: 'zoom',
              backgroundMusic: 'tech',
              cameraShot: 'medium-close',
              cameraAngle: 'eye-level',
              cameraMovement: 'pan-right',
              movementSpeed: 'normal',
              pausable: true,
              skippable: false,
              interactionHint: '',
              keywords: '机器学习,算法,数据',
              effect3D: 'particle',
              voiceType: 'female-professional',
              notes: '重点介绍机器学习的核心概念',
              showProperties: false
            }
          ]
        },
        {
          id: 3,
          title: '深度学习进阶',
          description: '探索神经网络的奥秘，掌握深度学习前沿技术',
          thumbnail: './static/img/03-zhong.png',
          status: 'archived',
          duration: 90,
          scenes: [
            {
              name: '神经网络基础',
              viewType: 'medium',
              slides: [
                { content: '神经网络是深度学习的基础，模拟人脑神经元的工作方式。' },
                { content: '反向传播算法是训练神经网络的核心技术。' },
                { content: '激活函数决定了神经网络的非线性表达能力。' }
              ]
            }
          ],
          pptSlides: [
            {
              title: '神经网络原理',
              script: '神经网络是深度学习的基础，它模拟人脑神经元的工作方式，通过多层连接实现复杂的模式识别。',
              pptImage: '',
              displayDuration: 40,
              transition: 'flip',
              backgroundMusic: 'soft',
              cameraShot: 'close',
              cameraAngle: 'low',
              cameraMovement: 'zoom-in',
              movementSpeed: 'slow',
              pausable: true,
              skippable: true,
              interactionHint: '语音回答问题',
              keywords: '神经网络,深度学习,神经元',
              effect3D: 'glow',
              voiceType: 'male-friendly',
              notes: '配合3D神经网络模型演示',
              showProperties: false
            }
          ]
        }
      ],
      
      // 当前编辑的课程
      currentCourse: {
        title: '',
        description: '',
        thumbnail: '',
        status: 'draft',
        duration: 0,
        scenes: [],
        pptSlides: []
      },
      
      // 选中的课程
      selectedCourse: {},
      
      // 编辑中的讲稿
      editingSlide: {
        sceneIndex: 0,
        slideIndex: 0,
        content: ''
      }
    }
  },
  
  computed: {
    filteredCourses() {
      let filtered = this.courses
      
      // 状态筛选
      if (this.statusFilter) {
        filtered = filtered.filter(course => course.status === this.statusFilter)
      }
      
      // 搜索筛选
      if (this.searchQuery) {
        filtered = filtered.filter(course => 
          course.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          course.description.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }
      
      return filtered
    },
    
    // 已发布课程数量
    publishedCount() {
      return this.courses.filter(course => course.status === 'published').length
    },
    
    // 草稿课程数量
    draftCount() {
      return this.courses.filter(course => course.status === 'draft').length
    },
    
    // 已归档课程数量
    archivedCount() {
      return this.courses.filter(course => course.status === 'archived').length
    }
  },
  
  mounted() {
    // 设置数据监听器
    this.setupDataListener()
    // 初始化课程数据
    this.refreshCourses()
  },
  
  beforeDestroy() {
    // 移除数据监听器
    if (this.dataListener) {
      courseDataManager.removeListener(this.dataListener)
    }
  },
  
  methods: {
    // 设置数据监听器
    setupDataListener() {
      this.dataListener = (event, data) => {
        console.log('课程管理收到数据更新:', event, data)
        // 可以在这里处理来自3D课堂的数据变更通知
      }
      courseDataManager.addListener(this.dataListener)
    },
    
    // 刷新课程列表
    refreshCourses() {
      this.courses = courseDataManager.getAllCourses()
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'draft': '📝 草稿',
        'published': '🚀 已发布',
        'archived': '📦 已归档'
      }
      return statusMap[status] || '❓ 未知'
    },
    
    // 获取总讲稿数
    getTotalSlides(course) {
      const sceneSlides = (course.scenes && course.scenes.length) ? 
        course.scenes.reduce((total, scene) => total + (scene.slides ? scene.slides.length : 0), 0) : 0
      const pptSlides = (course.pptSlides && course.pptSlides.length) ? course.pptSlides.length : 0
      return sceneSlides + pptSlides
    },
    
    // 计算讲稿时长（基于字数）
    calculateSlideDuration(content) {
      if (!content) return 0
      // 假设每分钟阅读150字，每秒2.5字
      const wordsPerSecond = 2.5
      const duration = Math.ceil(content.length / wordsPerSecond)
      return Math.max(duration, 5) // 最少5秒
    },
    
    // 获取场景时长
    getSceneDuration(scene) {
      if (!scene.slides || !scene.slides.length) return 0
      const totalSeconds = scene.slides.reduce((total, slide) => 
        total + this.calculateSlideDuration(slide.content), 0
      )
      return Math.ceil(totalSeconds / 60)
    },
    
    // 更新课程总时长
    updateCourseDuration() {
      let totalSeconds = 0
      
      // 计算场景讲稿时长
      if (this.currentCourse.scenes && this.currentCourse.scenes.length) {
        totalSeconds += this.currentCourse.scenes.reduce((total, scene) => 
          total + (scene.slides && scene.slides.length ? scene.slides.reduce((sceneTotal, slide) => 
            sceneTotal + this.calculateSlideDuration(slide.content), 0
          ) : 0), 0
        )
      }
      
      // 计算PPT页面时长
      if (this.currentCourse.pptSlides && this.currentCourse.pptSlides.length) {
        totalSeconds += this.currentCourse.pptSlides.reduce((total, slide) => 
          total + (slide.displayDuration || this.calculateSlideDuration(slide.script)), 0
        )
      }
      
      this.currentCourse.duration = Math.ceil(totalSeconds / 60)
    },
    
    // 添加场景
    addScene() {
      if (!this.currentCourse.scenes) {
        this.currentCourse.scenes = []
      }
      this.currentCourse.scenes.push({
        name: `场景 ${this.currentCourse.scenes.length + 1}`,
        viewType: 'medium',
        slides: [
          { content: '' }
        ]
      })
    },
    
    // 移除场景
    removeScene(index) {
      if (confirm('确定要删除这个场景吗？')) {
        if (this.currentCourse.scenes && this.currentCourse.scenes.length > index) {
          this.currentCourse.scenes.splice(index, 1)
          this.updateCourseDuration()
        }
      }
    },
    
    // 添加讲稿
    addSlide(sceneIndex) {
      if (this.currentCourse.scenes && this.currentCourse.scenes[sceneIndex]) {
        if (!this.currentCourse.scenes[sceneIndex].slides) {
          this.currentCourse.scenes[sceneIndex].slides = []
        }
        this.currentCourse.scenes[sceneIndex].slides.push({ content: '' })
      }
    },
    
    // 移除讲稿
    removeSlide(sceneIndex, slideIndex) {
      if (confirm('确定要删除这个讲稿吗？')) {
        if (this.currentCourse.scenes && 
            this.currentCourse.scenes[sceneIndex] && 
            this.currentCourse.scenes[sceneIndex].slides &&
            this.currentCourse.scenes[sceneIndex].slides.length > slideIndex) {
          this.currentCourse.scenes[sceneIndex].slides.splice(slideIndex, 1)
          this.updateCourseDuration()
        }
      }
    },
    
    // 编辑课程
    editCourse(course) {
      this.currentCourse = JSON.parse(JSON.stringify(course))
      this.showEditDialog = true
    },
    
    // 查看课程详情
    viewCourseDetail(course) {
      this.selectedCourse = course
      this.selectedSlides = [] // 重置选中状态
      this.showSlidesDetailed = false // 重置展开状态
      this.showDetailDialog = true
    },
    
    // 编辑讲稿内容
    editSlideContent(sceneIndex, slideIndex) {
      if (this.selectedCourse.scenes && 
          this.selectedCourse.scenes[sceneIndex] && 
          this.selectedCourse.scenes[sceneIndex].slides &&
          this.selectedCourse.scenes[sceneIndex].slides[slideIndex]) {
        this.editingSlide = {
          sceneIndex,
          slideIndex,
          content: this.selectedCourse.scenes[sceneIndex].slides[slideIndex].content
        }
        this.showSlideEditDialog = true
      }
    },
    
    // 保存讲稿内容
    saveSlideContent() {
      const { sceneIndex, slideIndex, content } = this.editingSlide
      if (this.selectedCourse.scenes && 
          this.selectedCourse.scenes[sceneIndex] && 
          this.selectedCourse.scenes[sceneIndex].slides &&
          this.selectedCourse.scenes[sceneIndex].slides[slideIndex]) {
        this.selectedCourse.scenes[sceneIndex].slides[slideIndex].content = content
        
        // 同步到课程列表
        const courseIndex = this.courses.findIndex(c => c.id === this.selectedCourse.id)
        if (courseIndex !== -1) {
          this.courses[courseIndex] = { ...this.selectedCourse }
        }
        
        this.showSlideEditDialog = false
        this.$message?.success('讲稿保存成功！')
      }
    },
    
    // 保存课程
    saveCourse() {
      if (!this.currentCourse.title.trim()) {
        alert('请输入课程标题')
        return
      }
      
      this.updateCourseDuration()
      
      if (this.showCreateDialog) {
        // 创建新课程
        const newCourse = {
          ...this.currentCourse,
          id: `course-${Date.now()}`,
          status: 'draft',
          teacher: {
            name: '系统教师',
            avatar: 'static/img/teacher.png',
            subject: this.currentCourse.title
          },
          stats: {
            totalSlides: this.currentCourse.pptSlides ? this.currentCourse.pptSlides.length : 0,
            totalDuration: this.currentCourse.duration * 60,
            studentsEnrolled: 0,
            completionRate: 0,
            averageScore: 0
          }
        }
        
        // 添加到数据管理器
        courseDataManager.courses.set(newCourse.id, {
          ...newCourse,
          classroomSlides: courseDataManager.generateClassroomSlides(newCourse.pptSlides || [])
        })
        
        this.courses.push(newCourse)
      } else {
        // 更新现有课程
        const index = this.courses.findIndex(c => c.id === this.currentCourse.id)
        if (index !== -1) {
          this.courses[index] = { ...this.currentCourse }
          
          // 同步更新数据管理器中的数据
          const courseData = courseDataManager.getCourse(this.currentCourse.id)
          if (courseData) {
            Object.assign(courseData, {
              ...this.currentCourse,
              classroomSlides: courseDataManager.generateClassroomSlides(this.currentCourse.pptSlides || [])
            })
            
            // 通知监听器课程已更新
            courseDataManager.notifyListeners('courseUpdated', { 
              courseId: this.currentCourse.id, 
              courseData: this.currentCourse 
            })
          }
        }
      }
      
      this.closeDialogs()
      alert('课程保存成功！')
    },
    
    // 发布课程
    publishCourse(courseId) {
      if (confirm('确定要发布这个课程吗？发布后学员就可以看到并学习这门课程。')) {
        const success = courseDataManager.publishCourse(courseId)
        if (success) {
          this.refreshCourses()
          this.$message?.success('课程发布成功！')
        } else {
          this.$message?.error('课程发布失败！')
        }
      }
    },

    // 取消发布课程
    unpublishCourse(courseId) {
      if (confirm('确定要取消发布这个课程吗？取消后学员将无法访问这门课程。')) {
        const success = courseDataManager.unpublishCourse(courseId)
        if (success) {
          this.refreshCourses()
          this.$message?.success('课程已取消发布！')
        } else {
          this.$message?.error('取消发布失败！')
        }
      }
    },

    // 归档课程
    archiveCourse(courseId) {
      if (confirm('确定要归档这个课程吗？归档后课程将不再显示在课程列表中。')) {
        const success = courseDataManager.archiveCourse(courseId)
        if (success) {
          this.refreshCourses()
          this.$message?.success('课程已归档！')
        } else {
          this.$message?.error('课程归档失败！')
        }
      }
    },

    // 删除课程
    deleteCourse(courseId) {
      if (confirm('确定要删除这个课程吗？此操作不可恢复。')) {
        const index = this.courses.findIndex(c => c.id === courseId)
        if (index !== -1) {
          this.courses.splice(index, 1)
          alert('课程删除成功！')
        }
      }
    },
    
    // 关闭弹窗
    closeDialogs() {
      this.showCreateDialog = false
      this.showEditDialog = false
      this.showBatchEditDialog = false
      this.showDetailDialog = false
      this.selectedSlideIndex = -1
      this.selectedSlides = []
      this.showSlidesDetailed = false
      this.currentCourse = {
        title: '',
        description: '',
        thumbnail: '',
        status: 'draft',
        duration: 0,
        scenes: [],
        pptSlides: []
      }
    },

    // ==================== 课程详情相关方法 ====================
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '未知'
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    },

    // 计算总字数
    calculateTotalWords(course) {
      if (!course.pptSlides || course.pptSlides.length === 0) return 0
      return course.pptSlides.reduce((total, slide) => {
        return total + (slide.script ? slide.script.length : 0)
      }, 0)
    },

    // 获取幻灯片类型文本
    getSlideTypeText(slideType) {
      const typeMap = {
        'title': '📝 标题页',
        'ppt': '📄 PPT页面',
        'image': '🖼️ 图片展示',
        'video': '🎬 视频播放',
        'model': '🎯 3D模型',
        'video-image': '🎬+🖼️ 视频+图片'
      }
      return typeMap[slideType] || '📝 普通页面'
    },

    // 检查幻灯片是否有媒体素材
    hasSlideMedia(slide) {
      return !!(slide.pptImage || slide.imageUrl || slide.videoUrl || slide.modelUrl)
    },

    // 切换幻灯片选择状态
    toggleSlideSelection(slideIndex) {
      const index = this.selectedSlides.indexOf(slideIndex)
      if (index > -1) {
        this.selectedSlides.splice(index, 1)
      } else {
        this.selectedSlides.push(slideIndex)
      }
    },

    // 全选/取消全选幻灯片
    selectAllSlides() {
      if (!this.selectedCourse.pptSlides) return
      
      if (this.selectedSlides.length === this.selectedCourse.pptSlides.length) {
        // 当前已全选，执行取消全选
        this.selectedSlides = []
      } else {
        // 执行全选
        this.selectedSlides = this.selectedCourse.pptSlides.map((_, index) => index)
      }
    },

    // 切换幻灯片详情显示
    toggleSlidesView() {
      this.showSlidesDetailed = !this.showSlidesDetailed
    },

    // 编辑PPT幻灯片
    editPPTSlide(slideIndex) {
      // 切换到编辑模式，并定位到指定幻灯片
      this.editCourse(this.selectedCourse)
      this.selectedSlideIndex = slideIndex
      this.showDetailDialog = false
    },

    // 预览单个幻灯片
    previewSlide(slideIndex) {
      const slide = this.selectedCourse.pptSlides[slideIndex]
      if (!slide) return
      
      // 创建预览窗口或模态框
      const previewData = {
        title: slide.title,
        script: slide.script,
        slideType: slide.slideType,
        backgroundColor: slide.backgroundColor,
        textColor: slide.textColor,
        duration: slide.displayDuration
      }
      
      // 这里可以打开一个新的预览模态框
      console.log('预览幻灯片:', previewData)
      alert(`预览幻灯片: ${slide.title}\n内容: ${slide.script}`)
    },

    // 复制幻灯片
    copySlide(slideIndex) {
      const slide = this.selectedCourse.pptSlides[slideIndex]
      if (!slide) return
      
      // 复制到剪贴板（模拟）
      const slideData = JSON.stringify(slide, null, 2)
      
      // 使用现代浏览器的剪贴板API
      if (navigator.clipboard) {
        navigator.clipboard.writeText(slideData).then(() => {
          alert('幻灯片数据已复制到剪贴板')
        }).catch(() => {
          console.log('复制的幻灯片数据:', slideData)
          alert('幻灯片数据已记录到控制台')
        })
      } else {
        console.log('复制的幻灯片数据:', slideData)
        alert('幻灯片数据已记录到控制台')
      }
    },

    // 导出选中的幻灯片
    exportSelectedSlides() {
      if (this.selectedSlides.length === 0) return
      
      const selectedSlidesData = this.selectedSlides.map(index => {
        return this.selectedCourse.pptSlides[index]
      }).filter(slide => slide)
      
      const exportData = {
        courseTitle: this.selectedCourse.title,
        selectedSlides: selectedSlidesData,
        exportTime: new Date().toISOString(),
        totalSlides: selectedSlidesData.length
      }
      
      // 创建下载文件
      const dataStr = JSON.stringify(exportData, null, 2)
      const dataBlob = new Blob([dataStr], { type: 'application/json' })
      const url = URL.createObjectURL(dataBlob)
      
      const link = document.createElement('a')
      link.href = url
      link.download = `${this.selectedCourse.title}_选中幻灯片_${new Date().getTime()}.json`
      link.click()
      
      URL.revokeObjectURL(url)
      alert(`已导出 ${selectedSlidesData.length} 个幻灯片`)
    },

    // 导出完整课程数据
    exportCourseData() {
      const exportData = {
        ...this.selectedCourse,
        exportTime: new Date().toISOString(),
        exportVersion: '1.0'
      }
      
      const dataStr = JSON.stringify(exportData, null, 2)
      const dataBlob = new Blob([dataStr], { type: 'application/json' })
      const url = URL.createObjectURL(dataBlob)
      
      const link = document.createElement('a')
      link.href = url
      link.download = `${this.selectedCourse.title}_完整数据_${new Date().getTime()}.json`
      link.click()
      
      URL.revokeObjectURL(url)
      alert('课程数据导出成功')
    },

    // 预览课程（跳转到3D课堂）
    previewCourse() {
      // 保存当前课程到数据管理器（如果尚未保存）
      if (!courseDataManager.getCourse(this.selectedCourse.id)) {
        courseDataManager.courses.set(this.selectedCourse.id, {
          ...this.selectedCourse,
          classroomSlides: courseDataManager.generateClassroomSlides(this.selectedCourse.pptSlides || [])
        })
      }
      
      // 跳转到3D课堂预览
      this.$router.push({
        path: '/3d-classroom',
        query: { courseId: this.selectedCourse.id, preview: true }
      })
    },

    // 复制课程
    duplicateCourse(course) {
      const newCourse = {
        ...JSON.parse(JSON.stringify(course)),
        id: `course-${Date.now()}`,
        title: `${course.title} (副本)`,
        status: 'draft',
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
        stats: {
          ...course.stats,
          studentsEnrolled: 0,
          completionRate: 0
        }
      }
      
      // 添加到课程列表
      this.courses.push(newCourse)
      
      // 添加到数据管理器
      courseDataManager.courses.set(newCourse.id, {
        ...newCourse,
        classroomSlides: courseDataManager.generateClassroomSlides(newCourse.pptSlides || [])
      })
      
      alert(`课程"${course.title}"已复制成功`)
      this.showDetailDialog = false
    },
    
    // 处理文件上传
    async handleFileUpload(event) {
      const file = event.target.files[0]
      if (!file) return

      try {
        // 显示加载状态
        this.isParsingPPT = true
        this.parseProgress = 0

        // 动态导入PPT解析器
        const { default: pptParser } = await import('@/utils/pptParser')
        
        // 检查文件类型
        if (!pptParser.isSupportedFile(file)) {
          alert('不支持的文件类型，请选择 .pptx 或 .ppt 文件')
          return
        }

        // 解析PPT文件
        this.parseProgress = 30
        const result = await pptParser.parsePPT(file)
        
        if (result.success) {
          this.parseProgress = 80
          
          // 将解析结果设置到当前课程
          this.currentCourse.pptSlides = result.data
          this.updateCourseDuration()
          
          this.parseProgress = 100
          
          // 显示成功消息
          this.$message?.success(result.message)
          
          // 自动设置课程标题（如果为空）
          if (!this.currentCourse.title.trim() && result.data.length > 0) {
            const firstSlide = result.data[0]
            if (firstSlide.title && firstSlide.title !== '幻灯片 1') {
              this.currentCourse.title = firstSlide.title
            } else {
              this.currentCourse.title = file.name.replace(/\.(pptx?|ppt)$/i, '')
            }
          }
          
          console.log('PPT解析成功:', result.data)
        } else {
          this.$message?.error(result.message)
        }
      } catch (error) {
        console.error('PPT文件处理失败:', error)
        this.$message?.error(`PPT文件处理失败: ${error.message}`)
      } finally {
        this.isParsingPPT = false
        this.parseProgress = 0
        // 清空文件输入
        event.target.value = ''
      }
    },
    
    // 加载测试PPT
    loadTestPPT() {
      // 模拟加载测试PPT数据
      this.currentCourse.pptSlides = [
        this.createNewSlide('课程介绍', '欢迎大家来到人工智能基础课程。今天我们将一起探索AI的奇妙世界，了解人工智能的基本概念和应用。'),
        this.createNewSlide('AI发展历史', '人工智能的发展可以追溯到20世纪50年代，从图灵测试到深度学习，AI经历了多次技术革命。'),
        this.createNewSlide('机器学习基础', '机器学习是AI的核心技术之一，通过算法让计算机从数据中学习规律，无需明确编程。'),
        this.createNewSlide('深度学习应用', '深度学习使用多层神经网络来处理复杂的数据模式，在图像识别、语音处理等领域取得了突破性进展。'),
        this.createNewSlide('实际应用案例', '让我们通过实际案例来理解AI的应用。在医疗、自动驾驶、智能推荐等领域都有广泛应用。')
      ]
      this.updateCourseDuration()
      alert('测试PPT数据加载成功！')
    },
    
    // 创建新的课堂环节
    createNewSlide(title = '', script = '', type = 'ppt') {
      return {
        // 基础信息
        title: title || `${this.getSlideTypeText(type)} ${(this.currentCourse.pptSlides?.length || 0) + 1}`,
        script: script,
        slideType: type, // 环节类型：title, ppt, image, video, model, video-image
        displayDuration: 30,
        
        // 素材资源
        pptImage: '',
        imageUrl: '',
        videoUrl: '',
        modelUrl: '',
        secondaryImageUrl: '', // 用于视频+图片类型
        
        // 素材属性
        imagePosition: 'center', // left, center, right, top, bottom
        videoAutoplay: true,
        videoLoop: false,
        videoVolume: 80,
        modelScale: 1.0,
        modelRotation: { x: 0, y: 0, z: 0 },
        modelAnimation: '',
        
        // 布局设置
        layoutType: 'single', // single, split, overlay, picture-in-picture
        primarySize: 70, // 主要素材占比（%）
        secondarySize: 30, // 次要素材占比（%）
        
        // 视觉效果
        transition: 'fade',
        backgroundMusic: '',
        backgroundColor: '#ffffff',
        textColor: '#333333',
        fontSize: 16,
        fontWeight: 'normal',
        textAlign: 'left',
        
        // 镜头属性
        cameraShot: 'medium',
        cameraAngle: 'eye-level',
        cameraMovement: 'static',
        movementSpeed: 'normal',
        
        // 交互属性
        pausable: true,
        skippable: true,
        interactionHint: '',
        keywords: '',
        clickable: false,
        hoverEffect: false,
        
        // 高级属性
        effect3D: '',
        voiceType: 'female-professional',
        subtitles: '', // 字幕文本
        subtitleStyle: 'bottom', // 字幕位置
        notes: '',
        showProperties: false
      }
    },
    
    // 获取环节类型文本
    getSlideTypeText(type) {
      const typeMap = {
        'title': '标题页',
        'ppt': 'PPT页面',
        'image': '图片展示',
        'video': '视频播放',
        'model': '3D模型',
        'video-image': '视频+图片'
      }
      return typeMap[type] || '课堂环节'
    },
    
    // 添加课堂环节
    addPPTSlide(type = 'ppt') {
      if (!this.currentCourse.pptSlides) {
        this.currentCourse.pptSlides = []
      }
      
      const newSlide = this.createNewSlide('', '', type)
      this.currentCourse.pptSlides.push(newSlide)
      this.updateCourseDuration()
      
      // 如果是编辑现有课程，同步到数据管理器
      if (this.showEditDialog && this.currentCourse.id) {
        courseDataManager.addPPTSlide(this.currentCourse.id, newSlide)
      }
    },
    
    // 选择PPT页面
    selectSlide(index) {
      this.selectedSlideIndex = index
    },
    
    // 切换属性面板
    togglePropertiesPanel(index) {
      this.currentCourse.pptSlides[index].showProperties = !this.currentCourse.pptSlides[index].showProperties
    },
    
    // 上移PPT页面
    moveSlideUp(index) {
      if (index > 0) {
        const slides = this.currentCourse.pptSlides
        const temp = slides[index]
        slides[index] = slides[index - 1]
        slides[index - 1] = temp
        if (this.selectedSlideIndex === index) {
          this.selectedSlideIndex = index - 1
        } else if (this.selectedSlideIndex === index - 1) {
          this.selectedSlideIndex = index
        }
      }
    },
    
    // 下移PPT页面
    moveSlideDown(index) {
      if (this.currentCourse.pptSlides && index < this.currentCourse.pptSlides.length - 1) {
        const slides = this.currentCourse.pptSlides
        const temp = slides[index]
        slides[index] = slides[index + 1]
        slides[index + 1] = temp
        if (this.selectedSlideIndex === index) {
          this.selectedSlideIndex = index + 1
        } else if (this.selectedSlideIndex === index + 1) {
          this.selectedSlideIndex = index
        }
      }
    },
    
    // 复制PPT页面
    duplicateSlide(index) {
      const originalSlide = this.currentCourse.pptSlides[index]
      const duplicatedSlide = JSON.parse(JSON.stringify(originalSlide))
      duplicatedSlide.title = `${originalSlide.title} (副本)`
      this.currentCourse.pptSlides.splice(index + 1, 0, duplicatedSlide)
      this.updateCourseDuration()
    },
    
    // 删除PPT页面
    removeSlide(index) {
      if (confirm('确定要删除这个PPT页面吗？')) {
        const slideToDelete = this.currentCourse.pptSlides[index]
        this.currentCourse.pptSlides.splice(index, 1)
        if (this.selectedSlideIndex >= index) {
          this.selectedSlideIndex = Math.max(0, this.selectedSlideIndex - 1)
        }
        this.updateCourseDuration()
        
        // 如果是编辑现有课程，同步到数据管理器
        if (this.showEditDialog && this.currentCourse.id && slideToDelete.id) {
          courseDataManager.deletePPTSlide(this.currentCourse.id, slideToDelete.id)
        }
      }
    },
    
    // 预览PPT页面
    previewSlide(index) {
      const slide = this.currentCourse.pptSlides[index]
      alert(`预览PPT页面：\n标题：${slide.title}\n讲稿：${slide.script}\n时长：${slide.displayDuration}秒\n景别：${slide.cameraShot}`)
    },
    
    // 通用素材上传
    uploadMaterial(index, fieldName, event) {
      const file = event.target.files[0]
      if (file) {
        // 这里应该上传到服务器，现在模拟本地预览
        const reader = new FileReader()
        reader.onload = (e) => {
          this.currentCourse.pptSlides[index][fieldName] = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    
    // 环节类型变更处理
    onSlideTypeChange(index) {
      const slide = this.currentCourse.pptSlides[index]
      // 根据新类型更新标题
      if (!slide.title || slide.title.includes('页面') || slide.title.includes('展示') || slide.title.includes('播放') || slide.title.includes('模型')) {
        slide.title = `${this.getSlideTypeText(slide.slideType)} ${index + 1}`
      }
      
      // 重置不适用的属性
      if (slide.slideType !== 'video' && slide.slideType !== 'video-image') {
        slide.videoAutoplay = true
        slide.videoLoop = false
        slide.videoVolume = 80
      }
      
      if (slide.slideType !== 'model') {
        slide.modelScale = 1.0
        slide.modelAnimation = ''
      }
      
      if (slide.slideType !== 'title') {
        slide.backgroundColor = '#ffffff'
        slide.textColor = '#333333'
        slide.fontSize = 16
        slide.fontWeight = 'normal'
        slide.textAlign = 'left'
      }
    },
    
    // 获取标题页样式
    getTitleStyle(slide) {
      return {
        backgroundColor: slide.backgroundColor || '#ffffff',
        color: slide.textColor || '#333333',
        fontSize: (slide.fontSize || 16) + 'px',
        fontWeight: slide.fontWeight || 'normal',
        textAlign: slide.textAlign || 'left',
        padding: '20px',
        borderRadius: '8px',
        minHeight: '120px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: slide.textAlign === 'center' ? 'center' : (slide.textAlign === 'right' ? 'flex-end' : 'flex-start')
      }
    },
    
    // 重新排序
    reorderSlides() {
      // 这里可以实现拖拽排序功能
      alert('拖拽排序功能开发中...')
    }
  }
}
</script>

<style scoped lang="scss">
.course-management {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 24px;
  }
  
  .btn-primary {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
  }
}

// 课程统计样式
.course-stats-section {
  margin-bottom: 20px;
  
  .stats-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      border-radius: 8px;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      .stat-icon {
        font-size: 24px;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      .stat-info {
        flex: 1;
        
        .stat-number {
          font-size: 24px;
          font-weight: bold;
          color: #2c3e50;
          margin-bottom: 4px;
        }
        
        .stat-label {
          font-size: 14px;
          color: #7f8c8d;
        }
      }
    }
  }
}

// 课程列表样式
.course-list-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  h2 {
    margin: 0;
    color: #2c3e50;
    font-size: 20px;
  }
  
  .header-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    
    .status-filter {
      .status-select {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        background: white;
        cursor: pointer;
        min-width: 120px;
        
        &:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 8px rgba(102, 126, 234, 0.2);
        }
      }
    }
    
    .search-bar {
      .search-input {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        width: 300px;
        font-size: 14px;
        
        &:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 8px rgba(102, 126, 234, 0.2);
        }
      }
    }
  }
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.course-card {
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .course-thumbnail {
    position: relative;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .course-status {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: bold;
      
      &.draft {
        background: linear-gradient(135deg, #f39c12, #e67e22);
        color: white;
        box-shadow: 0 2px 4px rgba(243, 156, 18, 0.3);
      }
      
      &.published {
        background: linear-gradient(135deg, #27ae60, #2ecc71);
        color: white;
        box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
      }
      
      &.archived {
        background: linear-gradient(135deg, #95a5a6, #7f8c8d);
        color: white;
        box-shadow: 0 2px 4px rgba(149, 165, 166, 0.3);
      }
    }
  }
  
  .course-info {
    padding: 20px;
    
    h3 {
      margin: 0 0 10px 0;
      color: #2c3e50;
      font-size: 18px;
    }
    
    .course-description {
      color: #7f8c8d;
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 15px;
    }
    
    .course-meta {
      display: flex;
      gap: 15px;
      margin-bottom: 15px;
      
      .meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #7f8c8d;
        
        .meta-icon {
          font-size: 14px;
        }
      }
    }
    
    .course-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      
      button {
        flex: 1;
        min-width: 70px;
        padding: 6px 10px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 11px;
        transition: all 0.3s ease;
        white-space: nowrap;
        
        &.btn-edit {
          background: #3498db;
          color: white;
          
          &:hover {
            background: #2980b9;
          }
        }
        
        &.btn-view {
          background: #2ecc71;
          color: white;
          
          &:hover {
            background: #27ae60;
          }
        }
        
        &.btn-publish {
          background: #f39c12;
          color: white;
          
          &:hover {
            background: #e67e22;
          }
        }
        
        &.btn-unpublish {
          background: #9b59b6;
          color: white;
          
          &:hover {
            background: #8e44ad;
          }
        }
        
        &.btn-archive {
          background: #95a5a6;
          color: white;
          
          &:hover {
            background: #7f8c8d;
          }
        }
        
        &.btn-delete {
          background: #e74c3c;
          color: white;
          
          &:hover {
            background: #c0392b;
          }
        }
      }
    }
  }
}

// 弹窗样式
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  &.detail-dialog {
    max-width: 1000px;
  }
  
  &.slide-edit-dialog {
    max-width: 600px;
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e1e8ed;
  
  h3 {
    margin: 0;
    color: #2c3e50;
  }
  
  .close-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    
    &:hover {
      background: #c0392b;
    }
  }
}

.dialog-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e1e8ed;
  
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    
    &.btn-cancel {
      background: #95a5a6;
      color: white;
      
      &:hover {
        background: #7f8c8d;
      }
    }
    
    &.btn-save {
      background: #27ae60;
      color: white;
      
      &:hover {
        background: #229954;
      }
    }
  }
}

// 表单样式
.form-group {
  margin-bottom: 20px;
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #2c3e50;
  }
  
  .form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    
    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 8px rgba(102, 126, 234, 0.2);
    }
  }
  
  .form-textarea {
    min-height: 80px;
    resize: vertical;
  }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.file-upload {
  display: flex;
  gap: 10px;
  align-items: center;
  
  .file-input {
    flex: 1;
  }
  
  .btn-secondary {
    padding: 10px 15px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    
    &:hover {
      background: #2980b9;
    }
  }
}

// 场景和讲稿样式
.scenes-section {
  margin-top: 30px;
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h4 {
      margin: 0;
      color: #2c3e50;
    }
    
    .btn-add-scene {
      padding: 8px 15px;
      background: #2ecc71;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      
      &:hover {
        background: #27ae60;
      }
    }
  }
}

.scene-item {
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  
  .scene-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
    
    h5 {
      margin: 0;
      color: #2c3e50;
    }
    
    .btn-remove {
      padding: 5px 10px;
      background: #e74c3c;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      
      &:hover {
        background: #c0392b;
      }
    }
  }
  
  .scene-content {
    padding: 15px;
  }
}

.slides-section {
  margin-top: 20px;
  
  .slides-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    h6 {
      margin: 0;
      color: #2c3e50;
    }
    
    .btn-add-slide {
      padding: 6px 12px;
      background: #f39c12;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      
      &:hover {
        background: #e67e22;
      }
    }
  }
}

.slide-item {
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  margin-bottom: 10px;
  
  .slide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
    font-size: 12px;
    
    .slide-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .slide-duration {
        color: #7f8c8d;
      }
      
      .btn-remove-small {
        width: 20px;
        height: 20px;
        border: none;
        background: #e74c3c;
        color: white;
        border-radius: 50%;
        cursor: pointer;
        font-size: 10px;
        
        &:hover {
          background: #c0392b;
        }
      }
    }
  }
  
  .slide-content {
    width: 100%;
    min-height: 60px;
    padding: 10px 15px;
    border: none;
    resize: vertical;
    font-size: 14px;
    
    &:focus {
      outline: none;
      background: #f8f9fa;
    }
  }
}

.course-summary {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  
  .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .summary-label {
      font-size: 12px;
      color: #7f8c8d;
      margin-bottom: 5px;
    }
    
    .summary-value {
      font-size: 16px;
      font-weight: bold;
      color: #2c3e50;
    }
  }
}

// 详情页面样式
.course-detail-info {
  margin-bottom: 30px;
  
  .detail-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    
    .meta-card {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      
      .meta-icon {
        font-size: 24px;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border-radius: 50%;
      }
      
      .meta-content {
        .meta-title {
          font-size: 12px;
          color: #7f8c8d;
          margin-bottom: 5px;
        }
        
        .meta-value {
          font-size: 18px;
          font-weight: bold;
          color: #2c3e50;
        }
      }
    }
  }
}

.scripts-detail {
  h4 {
    margin-bottom: 20px;
    color: #2c3e50;
  }
}

.scene-detail {
  margin-bottom: 30px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  overflow: hidden;
  
  .scene-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
    
    h5 {
      margin: 0;
      color: #2c3e50;
    }
    
    .scene-duration {
      font-size: 12px;
      color: #7f8c8d;
    }
  }
}

.slides-detail {
  padding: 15px;
}

.slide-detail {
  margin-bottom: 15px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  
  .slide-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e8ed;
    font-size: 12px;
    
    .slide-number {
      font-weight: bold;
      color: #2c3e50;
    }
    
    .slide-time {
      color: #7f8c8d;
    }
    
    .btn-edit-slide {
      padding: 4px 8px;
      background: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 10px;
      
      &:hover {
        background: #2980b9;
      }
    }
  }
  
  .slide-detail-content {
    padding: 15px;
    line-height: 1.6;
    color: #2c3e50;
  }
}

// 讲稿编辑样式
.slide-edit-info {
  margin-bottom: 20px;
  
  .edit-meta {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 12px;
    color: #7f8c8d;
    
    span {
      &:not(:last-child)::after {
        content: '|';
        margin-left: 10px;
        color: #bdc3c7;
      }
    }
  }
}

.slide-edit-textarea {
  width: 100%;
  min-height: 200px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  
  &:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.2);
  }
}

.slide-tips {
  margin-top: 20px;
  padding: 15px;
  background: #e8f5e8;
  border-radius: 8px;
  
  h5 {
    margin: 0 0 10px 0;
    color: #27ae60;
  }
  
  ul {
    margin: 0;
    padding-left: 20px;
    
    li {
      margin-bottom: 5px;
      color: #2c3e50;
      font-size: 12px;
    }
  }
}

// PPT页面编辑样式
.ppt-slides-section {
  margin-top: 30px;
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h4 {
      margin: 0;
      color: #2c3e50;
    }
    
    .section-actions {
      display: flex;
      gap: 10px;
      
      button {
        padding: 8px 15px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.3s ease;
        
        &.btn-add-slide {
          background: #2ecc71;
          color: white;
          
          &:hover {
            background: #27ae60;
          }
        }
        
        &.btn-batch-edit {
          background: #3498db;
          color: white;
          
          &:hover {
            background: #2980b9;
          }
        }
        
        &.btn-reorder {
          background: #f39c12;
          color: white;
          
          &:hover {
            background: #e67e22;
          }
        }
      }
    }
  }
}

.ppt-slides-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ppt-slide-item {
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  display: flex;
  flex-direction: column;
  
  &.selected {
    border-color: #667eea;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
    
    .slide-order .order-number {
      background: #667eea;
      color: white;
      border-color: #667eea;
    }
  }
  
  &:hover {
    border-color: #bdc3c7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.slide-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e8ed;
  
  .order-number {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    border: 2px solid #667eea;
    transition: all 0.3s ease;
  }
  
  .order-controls {
    display: flex;
    gap: 8px;
    
    .btn-move {
      width: 28px;
      height: 28px;
      border: none;
      background: #95a5a6;
      color: white;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        background: #7f8c8d;
        transform: translateY(-1px);
      }
      
      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
      }
    }
  }
}

.slide-content-area {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.slide-basic-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e1e8ed;
  
  .slide-title-section {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: end;
    
    .form-group {
      margin-bottom: 0;
      
      .duration-input {
        max-width: 120px;
      }
    }
  }
}

.slide-main-content {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.material-preview {
  flex: 0 0 240px;
}

.ppt-preview, .image-preview, .video-preview, .model-preview, .video-image-preview, .title-preview {
  width: 100%;
}

.ppt-thumbnail, .image-thumbnail, .video-thumbnail, .model-thumbnail {
  width: 240px;
  height: 180px;
  border: 2px dashed #bdc3c7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fafbfc;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #667eea;
    background: #f0f4ff;
  }
  
  img, .video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
}

.material-placeholder {
  text-align: center;
  color: #7f8c8d;
  
  span {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
  }
  
  p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
  }
}

.material-upload, .ppt-upload {
  .file-input-hidden {
    display: none;
  }
  
  .btn-upload {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }
  }
}

/* PPT解析进度样式 */
.ppt-parsing-progress {
  margin-top: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
  border-radius: 8px;
  border: 1px solid #d1e7ff;
  
  .progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    
    .progress-icon {
      font-size: 16px;
      animation: spin 1s linear infinite;
    }
    
    .progress-text {
      flex: 1;
      margin-left: 10px;
      font-size: 14px;
      color: #2c3e50;
      font-weight: 500;
    }
    
    .progress-percent {
      font-size: 14px;
      color: #667eea;
      font-weight: bold;
    }
  }
  
  .progress-bar {
    width: 100%;
    height: 6px;
    background: #e1e8ed;
    border-radius: 3px;
    overflow: hidden;
    
    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
      border-radius: 3px;
      transition: width 0.3s ease;
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 新素材类型样式 */
.title-preview {
  .title-display {
    border: 2px solid #e1e8ed;
    margin-bottom: 12px;
  }
  
  .title-controls {
    display: flex;
    gap: 15px;
    
    .color-controls {
      display: flex;
      flex-direction: column;
      gap: 5px;
      
      label {
        font-size: 12px;
        font-weight: bold;
        color: #34495e;
      }
      
      .color-input {
        width: 40px;
        height: 30px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}

.video-image-preview {
  .dual-material {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    
    .primary-material, .secondary-material {
      flex: 1;
      height: 120px;
      border: 2px dashed #bdc3c7;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #fafbfc;
      
      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
      }
    }
  }
  
  .dual-upload {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    
    .upload-group {
      flex: 1;
    }
  }
  
  .layout-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    .control-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
      
      label {
        font-size: 12px;
        font-weight: bold;
        color: #34495e;
      }
      
      .size-slider {
        width: 100%;
      }
    }
  }
}

.video-controls, .image-controls, .model-controls {
  margin-top: 12px;
  
  .control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    
    label {
      font-size: 12px;
      font-weight: bold;
      color: #34495e;
      min-width: 80px;
    }
    
    input[type="checkbox"] {
      margin-right: 5px;
    }
    
    .volume-slider, .scale-slider {
      flex: 1;
      max-width: 120px;
    }
  }
}

.model-viewer {
  text-align: center;
  color: #667eea;
  
  span {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
  }
  
  p {
    margin: 0 0 5px 0;
    font-size: 14px;
    font-weight: 500;
  }
  
  small {
    font-size: 11px;
    color: #7f8c8d;
  }
}

.script-content {
  flex: 1;
  min-width: 0; /* 防止flex子元素溢出 */
  
  .script-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e8ed;
    
    h6 {
      margin: 0;
      color: #2c3e50;
      font-size: 16px;
      font-weight: 600;
    }
    
    .script-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      
      .duration {
        background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
        color: #155724;
        padding: 4px 10px;
        border-radius: 15px;
        font-weight: 600;
        border: 1px solid #c3e6cb;
      }
      
      .word-count {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        color: #0d47a1;
        padding: 4px 10px;
        border-radius: 15px;
        font-weight: 600;
        border: 1px solid #90caf9;
      }
    }
  }
  
  .script-textarea {
    width: 100%;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    min-height: 120px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.3s ease;
    
    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
      background: #fafbfc;
    }
    
    &::placeholder {
      color: #95a5a6;
      font-style: italic;
    }
  }
}

.slide-properties {
  border-top: 1px solid #e1e8ed;
  
  .properties-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    
    h6 {
      margin: 0;
      color: #2c3e50;
    }
    
    .btn-toggle {
      padding: 6px 12px;
      background: #95a5a6;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      
      &:hover {
        background: #7f8c8d;
      }
    }
  }
  
  .properties-panel {
    padding: 20px;
    background: #fafbfc;
  }
}

.property-group {
  margin-bottom: 25px;
  
  h7 {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 2px solid #667eea;
  }
}

.property-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
  
  &.full-width {
    grid-template-columns: 1fr;
  }
}

.property-item {
  label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #34495e;
  }
  
  .property-input, .property-select, .property-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    
    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
    }
  }
  
  .property-checkbox {
    width: auto;
    margin-right: 8px;
  }
  
  .property-textarea {
    resize: vertical;
    min-height: 60px;
  }
}

.slide-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e1e8ed;
  
  .btn-action {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    
    &.btn-duplicate {
      background: #3498db;
      color: white;
      
      &:hover {
        background: #2980b9;
      }
    }
    
    &.btn-preview {
      background: #2ecc71;
      color: white;
      
      &:hover {
        background: #27ae60;
      }
    }
    
    &.btn-remove {
      background: #e74c3c;
      color: white;
      
      &:hover {
        background: #c0392b;
      }
    }
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
  
  .dialog-content {
    width: 95%;
    margin: 10px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .detail-meta {
    grid-template-columns: 1fr;
  }
  
  .course-summary {
    flex-direction: column;
    gap: 10px;
  }
  
  .slide-main-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .ppt-preview {
    flex: none;
    align-self: center;
  }
  
  .slide-basic-info .slide-title-section {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .property-row {
    grid-template-columns: 1fr;
  }
  
  .section-actions {
    flex-direction: column;
    
    button {
      width: 100%;
    }
  }
  
  .slide-order {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    
    .order-controls {
      flex-direction: row;
    }
  }
}

/* ==================== 课程详情弹窗样式 ==================== */

/* 详情弹窗基础样式 */
.detail-dialog {
  width: 90vw;
  max-width: 1200px;
  max-height: 90vh;
  overflow: hidden;
  
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      
      .btn-export, .btn-preview {
        padding: 8px 15px;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
      }
      
      .btn-export {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
      }
      
      .btn-preview {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
        }
      }
    }
  }
  
  .dialog-body {
    max-height: calc(90vh - 140px);
    overflow-y: auto;
    padding: 0 5px;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 3px;
    }
  }
}

/* 课程基本信息样式 */
.course-basic-info {
  margin-bottom: 25px;
  
  .info-section {
    display: flex;
    gap: 20px;
    
    .course-thumbnail-large {
      position: relative;
      width: 200px;
      height: 120px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      
      .course-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .status-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: bold;
        
        &.published {
          background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
          color: white;
        }
        
        &.draft {
          background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
          color: white;
        }
        
        &.archived {
          background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
          color: white;
        }
      }
    }
    
    .course-meta-info {
      flex: 1;
      
      h4 {
        margin: 0 0 15px 0;
        color: #2c3e50;
        font-size: 18px;
        font-weight: 600;
      }
      
      .info-item {
        display: flex;
        margin-bottom: 10px;
        
        label {
          min-width: 80px;
          font-weight: 600;
          color: #555;
          margin-right: 10px;
        }
        
        span {
          color: #333;
          line-height: 1.4;
        }
      }
    }
  }
}

/* 课程统计数据样式 */
.course-stats-detail {
  margin-bottom: 25px;
  
  h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    
    .stat-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      border: 1px solid #e9ecef;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      }
      
      .stat-icon {
        font-size: 32px;
        opacity: 0.8;
      }
      
      .stat-content {
        flex: 1;
        
        .stat-title {
          font-size: 12px;
          color: #666;
          margin-bottom: 5px;
          font-weight: 500;
        }
        
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #2c3e50;
          margin-bottom: 3px;
        }
        
        .stat-detail {
          font-size: 11px;
          color: #888;
        }
      }
    }
  }
}

/* PPT讲稿详情样式 */
.ppt-slides-detail {
  margin-bottom: 25px;
  
  .detail-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    
    h4 {
      margin: 0;
      color: #2c3e50;
      font-size: 18px;
      font-weight: 600;
    }
    
    .section-actions {
      display: flex;
      gap: 8px;
      
      button {
        padding: 6px 12px;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s;
        
        &.btn-select-all {
          background: #e3f2fd;
          color: #1976d2;
          
          &:hover {
            background: #bbdefb;
          }
        }
        
        &.btn-export-slides {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          
          &:hover:not(:disabled) {
            transform: translateY(-1px);
          }
          
          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
        
        &.btn-toggle-view {
          background: #f5f5f5;
          color: #666;
          
          &:hover {
            background: #eeeeee;
          }
        }
      }
    }
  }
  
  .slides-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .slide-detail-card {
      background: white;
      border: 1px solid #e1e8ed;
      border-radius: 10px;
      overflow: hidden;
      transition: all 0.3s;
      
      &:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
      
      &.selected {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
      }
      
      .slide-header {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        background: #fafbfc;
        border-bottom: 1px solid #e1e8ed;
        
        .slide-selector {
          display: flex;
          align-items: center;
          margin-right: 15px;
          
          .slide-checkbox {
            margin-right: 8px;
          }
          
          .slide-number {
            font-size: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 600;
          }
        }
        
        .slide-title {
          flex: 1;
          font-weight: 600;
          color: #2c3e50;
          font-size: 14px;
        }
        
        .slide-meta {
          display: flex;
          gap: 10px;
          margin-right: 15px;
          
          .slide-type {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            
            &.title {
              background: #e8f5e8;
              color: #2e7d32;
            }
            
            &.ppt {
              background: #e3f2fd;
              color: #1976d2;
            }
            
            &.image {
              background: #fff3e0;
              color: #f57c00;
            }
            
            &.video {
              background: #fce4ec;
              color: #c2185b;
            }
            
            &.model {
              background: #f3e5f5;
              color: #7b1fa2;
            }
          }
          
          .slide-duration {
            background: #f5f5f5;
            color: #666;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
          }
        }
        
        .slide-actions {
          display: flex;
          gap: 5px;
          
          button {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            
            &.btn-edit {
              background: #e3f2fd;
              color: #1976d2;
              
              &:hover {
                background: #bbdefb;
              }
            }
            
            &.btn-preview {
              background: #e8f5e8;
              color: #2e7d32;
              
              &:hover {
                background: #c8e6c9;
              }
            }
            
            &.btn-copy {
              background: #fff3e0;
              color: #f57c00;
              
              &:hover {
                background: #ffe0b2;
              }
            }
          }
        }
      }
      
      .slide-content {
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr 200px;
        gap: 20px;
        
        .script-preview {
          h6 {
            margin: 0 0 10px 0;
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
          }
          
          .script-text {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
            line-height: 1.6;
            font-size: 13px;
            color: #333;
            margin-bottom: 10px;
          }
          
          .script-stats {
            display: flex;
            gap: 15px;
            font-size: 11px;
            color: #666;
            
            span {
              background: #f0f0f0;
              padding: 2px 8px;
              border-radius: 10px;
            }
          }
        }
        
        .visual-settings, .material-info {
          h6 {
            margin: 0 0 10px 0;
            color: #2c3e50;
            font-size: 14px;
            font-weight: 600;
          }
          
          .visual-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
            
            .color-info {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 12px;
              
              .color-preview {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                border: 1px solid #ddd;
              }
            }
            
            .effect-info {
              display: flex;
              flex-direction: column;
              gap: 4px;
              font-size: 12px;
              color: #666;
            }
          }
          
          .media-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            
            .media-item {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 12px;
              color: #666;
              
              .media-icon {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
  
  .no-slides {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    
    .no-slides-icon {
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.6;
    }
    
    p {
      margin: 0 0 20px 0;
      font-size: 16px;
    }
    
    .btn-add-slides {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

/* 学习数据分析样式 */
.learning-analytics {
  margin-bottom: 25px;
  
  h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
  }
  
  .analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    
    .analytics-card {
      background: white;
      border: 1px solid #e1e8ed;
      border-radius: 12px;
      padding: 20px;
      
      h6 {
        margin: 0 0 15px 0;
        color: #2c3e50;
        font-size: 14px;
        font-weight: 600;
      }
      
      .progress-chart {
        .progress-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          font-size: 12px;
          
          .progress-bar-small {
            flex: 1;
            height: 6px;
            background: #f0f0f0;
            border-radius: 3px;
            margin: 0 10px;
            overflow: hidden;
            
            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%);
              border-radius: 3px;
              transition: width 0.3s ease;
              
              &.studying {
                background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%);
              }
            }
          }
        }
      }
      
      .score-info {
        .score-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          
          .score-label {
            font-size: 12px;
            color: #666;
          }
          
          .score-value {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
          }
        }
      }
    }
  }
}

/* 弹窗底部按钮样式 */
.detail-dialog .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e1e8ed;
  background: #fafbfc;
  
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    
    &.btn-cancel {
      background: #f5f5f5;
      color: #666;
      
      &:hover {
        background: #eeeeee;
      }
    }
    
    &.btn-edit-course {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
    }
    
    &.btn-duplicate {
      background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
      color: white;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-dialog {
    width: 95vw;
    
    .course-basic-info .info-section {
      flex-direction: column;
      
      .course-thumbnail-large {
        width: 100%;
        height: 160px;
      }
    }
    
    .slide-content {
      grid-template-columns: 1fr !important;
    }
    
    .stats-grid, .analytics-grid {
      grid-template-columns: 1fr !important;
    }
  }
}
</style> 